<template>
	<div class="wrap">
		<div class="content_box">
			<div class="box">
				<div class="box_title">产品服务</div>
				<div class="box_content" v-for="(item, index) in service" :key="index">
					{{ item.label }}
				</div>
			</div>
			<div class="box">
				<div class="box_title">通用解决方案</div>
				<div class="box_content" v-for="(item, index) in methodList" :key="index">
					{{ item.label }}
				</div>
			</div>
			<div class="box">
				<div class="box_title">行业解决方案</div>
				<div class="box_content" v-for="(item, index) in methodList2" :key="index">
					{{ item.label }}
				</div>
			</div>
			<div class="box">
				<div class="box_title">技术服务</div>
				<div class="box_content" v-for="(item, index) in employ" :key="index">
					{{ item.label }}
				</div>
			</div>
			<div class="box">
				<div class="box_title">关于我们</div>
				<div class="box_content" v-for="(item, index) in me" :key="index">
					{{ item.label }}
				</div>
			</div>
		</div>
		<div class="foot_content">
			<div class="foot_bar">
				<div>服务热线：1000000000000</div>
				<div>关于我们</div>
				<div>集团网站</div>
				<div>渠道合作</div>
			</div>

			<hr />

			<div class="foot_line">
				<span>&copy; 耀琰科技版权所有</span>
				<span>京备：1234556</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	let service = ref([
		{
			label: "大数据服务",
		},
		{
			label: "互联网内容服务",
		},
		{
			label: "工业物联网服务",
		},
	]);
	let methodList = ref([
		{
			label: "外网内容管理系统方案",
		},
		{
			label: "外网大数据监控系统方案",
		},
		{
			label: "内网门户系统方案",
		},
		{
			label: "运单监管系统方案",
		},
		{
			label: "大屏幕监管系统方案",
		},
	]);
	let employ = ref([
		{
			label: "技术服务",
		},
		{
			label: "申请试用",
		},
	]);
	let me = ref([
		{
			label: "公司简介",
		},
		{
			label: "公司资质",
		},
		{
			label: "公司客户",
		},
		{
			label: "公司文化",
		},
	]);
	let methodList2 = ref([
		{
			label: "元宇宙",
		},
		{
			label: "政府",
		},
		{
			label: "金融",
		},
		{
			label: "制造",
		},
		{
			label: "能源",
		},
	]);
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 20px;
		height: 30vh;
		display: flex;
		flex-direction: column;
		// border: 1px solid red;
	}
	.content_box {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		> .box {
			margin: 0px 50px;
			> .box_title {
				margin-bottom: 10px;
				color: #333333;
				font-family: sans-serif;
				font-size: 12px;
				font-weight: 600;
				line-height: 18px;
			}
			> .box_content {
				color: #555555;
				margin-bottom: 14px;
				font-family: sans-serif;
				font-size: 10px;
				text-align: left;
			}
		}
	}
	.foot_content {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		color: #888888;
		font-size: 12px;
		> .foot_bar {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			> div {
				margin: 10px 20px;
			}
		}
		> .foot_line {
			> span {
				margin: 0px 20px;
			}
		}
	}
</style>
